**************电商全端项目->乐淘****************

-------------------------项目初始化---------
  一.准备项目->解压乐淘(盘符中不要有中文)
  二.准备数据->mysql
  三.启动项目->在项目根目录打开命令向窗口
    乐淘端口号为3000 ->localhost:3000/

--------------------------登录页面----------
  一.初始化git 创建index页面 引入基本插件 上传至码云 创建login分支
  二.使用栅格布局 书写html页面 ->bootstrap/组件/面板+表单
    *1.布局完成 使用bootstrapValidator表单验证控件校验表单
      # 初始化->$('#form').bootstrapValidator({})
      # 指定校验时的图标显示,默认是bootstrap风格->feedbackIcons
      # 设置用户名的校验条件->fields  (校验时 名称对应表单的name属性)
      # 在对应的校验条件中设置回调函数可以在updateStatus里使用(提示信息)

    *2.登录实现 
    ->因为submit的按钮点击时会刷新页面 但是这个插件只识别submit,所以要阻止submit的默认行为 使用preventDfault();
    ->在bootstrapValidator中的注册完成事件中提交ajax请求 访问数据库 
    ->获取响应码 根据响应码显示对应的信心 成功跳转至主页
      #使用校验控件的注册完成事件
        1. 发送ajax请求 根据接口文档(data中使用serialize()序列化数据)
        2.在成功的回调函数中 判断后端返回的响应码 
        3.在对应的响应结果中 更新字段的状态->updateStatus(field, status, 在对应的校验条件中写的回调函数)
        4.返回成功的状态码->true 跳转至首页

    *3.重置按钮 因为默认的重置按钮只可重置内容文本 但是不可重置提示的样式->使用表单的原型上的resetForm
        # $("#form").data('bootstrapValidator').resetForm();//重置表单，并且会隐藏所有的错误提示和图标

--------->登陆完成 跳转至主分支 合并login 上传至服务器->码云


----------------------------------首页布局---------

    ##侧边栏和主体头部写在公共部分
    整个网页分为三大块 侧边栏 头部 内容(路径导航写在内容模块)
    注意点:
      *1.二级分类要写在li中 在设置一个盒子 中包着两个a标签
      *2,. 盒子默认是隐藏的 只有在二级分类中才是默认显示的

    js:
      # 点击分类管理 展开折叠二级菜单
      #点击菜单 切换并集公共类
    
    ###点击退出按钮 显示模态框 点击确定 发送ajax请求
    js 写在公共js中 因为每个页面都有退出按钮

********首页主体部分------
    #使用栅格布局 俩个盒子各站6
    #使用百度的echarts.js插件 这是一个图表插件
    #引入 设置一个有宽高的父盒子 复制代码
    
------------------首页完成 上传码云---


-------------------登录拦截--------------isLogin.js
谁用谁引入 login不要
    ##设置一个单独的js文件
    #一进入页面，就判断用户之前是否登录过，如果登录就继续访问，否则跳转到登录页进行登录
    #发送ajax请求 请求退出登录的接口文档 
    #在成功的回调函数中判断是否登录 info.error就是没有登录 跳转至登录页面
    #登陆的话不拦截



--------------------用户管理页面--->user.html
     #所有的页面都有侧边栏头部 直接赋值即可(样式和js直接引入coomon)
     注意:要更改路径导航的文字信息

      表格直接使用bootstrap里面的表格即可
      #里面的数据需要动态渲染
      #在页面上把tbody里面的页面设置为模板引擎
      最后操作那里是按钮

      注意  页面中两个模态框  一个是点击切换按钮的莫态框 一个是退出按钮的模态框



    js部分
      在入口函数中书写渲染的代码
      {--渲染--}
       1. 页面加载后 , 在页面渲染第一屏用户数据
       2.声明当前页面变量和页面条数的代码
       3.把render()风封装为一个函数
          #发送ajax请求给获取用户数据的接口
          #上传当前页码和页面数据条数
          #在成功的回调函数中 接收数据
           *使用模板引擎 把获取到的数据渲染到页面上
           *使用bootstrapPafinator分控插件
            -注意 是基于bootstrap的  版本3要求父容器为ul 所以一般是div包裹ul 版本2要求父盒子w为div
             --指定当前页
             --totalPages:Math.ceil(info.total/info.size),//指定总页数
             --在分页控件的onPageClicked事件中 记录当前页码
             --重新渲染 ->render()

      {--点击按钮--}
      #切换按钮的状态 在模板引擎那里判断状态码 为1就是禁用按钮的样式 否则就是启用
      -->使用事件委托 绑定事件
      声明两个变量 id和isDelete
      #给tbody注册事件委托 点击按钮 显示模态框->$('#userModal').modal('show');
      #id = $(this).parent().data('id');在模板引擎总设置data-id
      //jquery中提供了data()方法 用于获取datda-开头的自定义属性
      //记录用户要禁用还是要启用
      //通过颜色判断isDelete= $(this).hasClass('btn-success')?1:0;
      
      ***点击模态框的确定按钮 操作对应的id数据
      给确定按钮注册点击事件 发送ajax请求 请求修改用户数据的接口 上传id和isDelete
      ##在请求成功的回调函数中 判断 如果成功 隐藏模态框 重新渲染页面

------------------用户的一级分类页面-->first.html
      侧边栏 导航条和路径导航复制首页的
      #在一级分类里面把current类改到一级分类上 
        分类菜单里面的display:none删掉  只要点击进一二两个分类菜单倒要显示这个块级元素

      **布局
        *添加按钮和列表的渲染 
         -使用bootstrap的组件表单直接布局 
      **js
        *渲染页面
         -相对应的后台分类接口发送ajax获取数据
         -根据获取后的数据 渲染页面 
         -使用bootstrap-paginator分页控件
           --首先声明两个变量 currentPage=1(当前页面),pageSize=2(数据条数) 
           --发送ajax 上传当前页码和页码条数
           --在成功的回调函数中使用模板引擎把数据渲染至页面
           --使用分页控件的事件(需要指定版本 指定当前页,指定总页数->totalPages:Math.ceil(info.total/info.size))
           ---使用onPageClicked回调函数 里面有四个参数 只用传最后一个page(记录的那个页码,重新渲染数据)
         *表单验证
         --验证一级分类的表单名称不能为空
          -使用bootstrapValidator表单验证控件
          -username不可为空notEmpty
         *点击确定按钮 发送ajax请求 存储数据 重新渲染
           -使用空间的表单校验完成事件 使用事件对象阻止submit默认跳转行为
           -发送ajax请求 表单序列化数据  上传至后台
           -在成功的回调函数中 判断 添加成功隐藏模态框
           -渲染第一页  调用render()
           -使用空间的表单重置 更新字段的状态


-----------------分类管理的二级页面-------------------second.html
         注意:
            .二级页面与一级页面大致相同 
            .二级页面添加分类是需要上传图片,使用jquery-fileupload插件
            .模态框部分只需修改主体部分即可 在一个form表单里面书写html代码
          ##模态框中
           *form表单 
            =>下拉菜单  
            -使用bootstrap即可  里面ul下面的数据使用js+模板引擎动态渲染,使用表单隐藏域储存name值 ,选择下拉框时，把选中a的id存到categoryId中的value值
            -下拉菜单的模板引擎 动态创建li>a在a标签上使用自定义属性存储id值 里面动态接收数据库中的v.categoryName
            =>二级分类名称
              div中使用input表单name为brandName
            =>分类logo
              -使用lable for="file" 当文件域中文件后 会立即上传,要先通过data-url指定上传的地址,mutiple 用于多文件上传,data-url 指定服务器提交图片地址
              -input 文件域 <input type="file" name="pic1" id="file" data-url="/category/addSecondCategoryPic" style="display: none">
            =>图片显示区域 
             -设置一个img 使用js 动态获取img的src
             -设置一个隐藏域 name="brandLogo" 图片上传时，把img的地址存到brandLogo中的value值
            ##渲染页面的模板引擎需要加上brandName和img

        ------js部分----
       ##1.首先是与一级页面相同的获取数据 渲染页面
       ##2.填充下拉列表的数据 发送ajax获取一级分类的数据,是用模板引擎渲染列表
       ##3.点击下拉列表 显示选中的结果,
        -使用事件委托,给ul下的每一个a绑定点击事件 
        -获取当前a标签的id和文本,选择当前选的分类id 赋值给隐藏域的data('id')
        -将校验结果改为校验成功$("#form").data('bootstrapValidator').updateStatus('categoryId', 'VALID');
        ##4.上传二级分类图片$('#file').fileupload({})
          -使用jquery的jquery-fileupload插件
          -done: function (e, data) {}中 获取服务器中保存的图片地址
          -var url = data.result.picAddr;
          -显示赋值给img的src 降低至放在隐藏域中
          -将校验结果改为校验成功
        ##5.做表单验证 数据不可为空
          -指定不校验的类型excluded: [], //让隐藏的元素页被校验
          -指定教研室的图标显示 默认是bootstrap风格的图标
          -验证字段filds:{里面写对应的name属性}
        ##6.在表单数据校验通过的情况下 通过ajax将数据提交至服务器，添加完成后，页面重新渲染
          -使用表单完成事件 阻止默认跳转
          -在成功的回调函数中关闭模态框
          -重新渲染第一页
          -重置表单和验证效果
          -手动重置下拉列表和图片


------------------------------商品管理--------product
        注意:按钮部分的模板引擎与用户页面相似
             添加商品的模态框中多数都为相同的表单

        ##1.动态创建tbody中的tr,里面的按钮与用户页面的模板代码相似
        ##2.添加分类的模态框
           =>一级分类下拉菜单 与之前代码相同
           =>下面的输入框大多相同 class="form-group" input的name不同
           =>上传图片的logo  多文件上传  multiple
            -隐藏域->在js部分储存图片地址
            --通过form属性 = 表单域id  可以指定 表单属于哪个form 

        {  js部分
           ##1.页面加载后 在页面渲染第一屏的数据 并且创建一个空数组,储存上传图片的数据
           ##2.填充下拉列表数据(相同代码)
           ##3.点击分类列表时，获取当前列表的内容设置给button按钮
              -使用事件委托 给ul下的每一个a动态绑定点击事件  点击时获取内容
           ##4.监听文件上传插件上传成功事件,//只要最近上传的三张图片的地址 和图片名称
            -将图片添加到数组中
            -将本次上次完成的图片添加到图片列表中
            -append 向盒子内部后面添加  prepend向盒子内部的前面
            -如果picArr长度大于3，删除最后一个元素
            -当picArr的长度等于3时，设置表单状态验证通过

           ##5.做表单数据校验（数据不能为空）所有数据非空验证，库存必须是非0开头的数字,尺码格式： xx-xx  一一匹配

           ##6.表单验证成功，获取表单数据，提交服务器,使用空间的注册完成事件
             -阻止submit的默认行为
             -获取表单数据，通过ajax提交给服务器(因为是三张图片 所以需要手动拼接字符串) dataStr += '&picName1=' + picArr[0].picName + '&picAddr1=' + picArr[0].picAddr;

             -通过ajax将数据提交给服务器
               1-关闭模态框
               2-重新渲染第一页
               3-表单重置
                重置表单的内容 和 验证效果
                手动重置 下拉列表 和 图片
                重置图片列表 删除图片列表

        } 
                  

















--------------------------公共部分---------------------

************进度条
   #使用NProgress插件实现 在全局第一次发送ajax时(.ajaxStart())开启进度条( NProgress.start();)
   # 在全局所有的ajax响应结束后(.ajaxStop) 关闭进度条(NProgress.done();) (注意事件要注册给document)

*************侧边栏
    **侧边栏css部分
      #侧边栏固定定位(点击菜单按钮切换时写并集类left:-180px)
      #头部固定定位设置padding-Left:180px 切换时为0
      #内容使用container-fuild padding-Left:180px 切换时为0

   #侧边栏js部分
    *1.在每个页面设置current类 点击跳转至该页面 该页面对应的那一栏导航高亮
    *2.给分类管理注册点击事件 点击时 让二级分类的大盒子slideToggle()
     js:
      # 点击分类管理 展开折叠二级菜单
      # 点击菜单 切换并集公共类

*****************退出登录

   #获取按钮  注册点击事件
   #发送ajax 请求对应的接口文档 在成功的回调函数中判断  如果成功跳转登录页面




